page {
  --primary-text: #303133;
  --regular-text: #606266;
  --secondary-text: #909399;
  --placeholder-text: #c0c4cc;
  --theme-color: #19be6b;
  --theme-color-dark: #18b566;
  --danger-color: #f56c6c;
  --warning-color: #f9ae3d;
  --card-bg: #ffffff;
  --border-color: #e4e7ed;
  --gender-male-color: #2979ff;
  --gender-female-color: #d81e06;

  --font-size-lg: 28rpx;
  --font-size-md: 26rpx;
  --font-size-sm: 24rpx;
  --font-size-xs: 22rpx;
}

.container {
  padding: 24rpx;
  box-sizing: border-box;
}

// 通用颜色类
.primary-text-color {
  color: var(--primary-text);
}

.secondary-text-color {
  color: var(--secondary-text);
}

.placeholder-text-color {
  color: var(--placeholder-text);
}


// 卡片样式
.record-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20rpx;

    .user-identity {
      display: flex;
      align-items: center;

      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .nickname {
        font-size: var(--font-size-lg);
        color: var(--primary-text);
        font-weight: bold;
        display: flex;
        align-items: center;

        .gender-icon {
          margin-left: 10rpx;

          &.gender-male {
            color: var(--gender-male-color);
          }

          &.gender-female {
            color: var(--gender-female-color);
          }
        }
      }
    }

    .contact-btn {
      display: flex;
      align-items: center;
      padding: 8rpx 16rpx;
      border-radius: 30rpx;
      font-size: var(--font-size-sm);
      color: var(--regular-text);
      gap: 8rpx;

      &.btn-hover {
        background-color: #f5f5f5;
      }
    }
  }

  .card-body {

    .item-line {
      display: flex;
      align-items: center;
      font-size: var(--font-size-md);
      line-height: 1.5;
      margin: 16rpx 0;

      .label {
        color: var(--secondary-text);
        flex-shrink: 0;
      }

      .value {
        color: var(--regular-text);
      }

      .quantity-highlight {
        font-weight: bold;
        color: var(--warning-color);
        margin-left: 10rpx;
      }

      .item-category-tag {
        margin-left: 16rpx;
      }
    }

    .location-info {
      align-items: center;
      gap: 8rpx;
      border-radius: 8rpx;
      font-size: var(--font-size-sm);
      color: var(--secondary-text);
    }
  }

  .card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 20rpx;
    padding-top: 20rpx;
    margin-top: 20rpx;
    border-top: 1rpx solid var(--border-color); // 分割线

    .action-btn {
      --button-default-height: 56rpx;
      --button-default-line-height: 56rpx;
    }
  }
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;

  .empty-text {
    margin-top: 20rpx;
    color: var(--secondary-text);
    font-size: var(--font-size-md);
  }
}

// 操作弹窗样式 (基于van-popup)
.modal-container {
  width: 620rpx; // 定宽
  background-color: var(--card-bg);
  border-radius: 16rpx;
  overflow: hidden;

  .modal-title {
    font-size: var(--font-size-lg);
    font-weight: bold;
    text-align: center;
    padding: 32rpx;
    color: #fff;

    &.title-primary {
      background-color: var(--theme-color);
    }

    &.title-danger {
      background-color: var(--danger-color);
    }
  }

  .modal-body {
    padding: 32rpx;

    .reason-input {
      width: 100%;
      height: 180rpx;
      background-color: var(--bg-color);
      border-radius: 8rpx;
      padding: 16rpx;
      box-sizing: border-box;
      font-size: var(--font-size-md);
      color: var(--regular-text);

      .input-placeholder {
        color: var(--placeholder-text);
      }
    }

    .quick-reply-wrapper {
      margin-top: 24rpx;

      .quick-reply-title {
        font-size: var(--font-size-sm);
        color: var(--secondary-text);
      }

      .tags-group {
        margin-top: 16rpx;
        display: flex;
        flex-wrap: wrap;
        gap: 16rpx;

        .quick-reply-tag {
          background-color: #f0f0f0;
          color: var(--regular-text);
          padding: 8rpx 20rpx;
          font-size: var(--font-size-sm);
          border-radius: 30rpx;
          transition: all 0.2s;

          &.tag-selected {
            background-color: var(--theme-color-dark);
            color: #fff;
          }
        }
      }
    }
  }

  .modal-footer {
    display: flex;
    border-top: 1rpx solid var(--border-color);

    .modal-btn {
      flex: 1;
      height: 90rpx;
      line-height: 90rpx;
      margin: 0;
      border-radius: 0;
      font-size: var(--font-size-md);

      &::after {
        border: none;
      }

      &.btn-cancel {
        background-color: #fff;
        color: var(--regular-text);
      }

      &.btn-confirm {
        color: #fff;

        &[disabled] {
          background-color: #e3e3e3 !important;
          color: #fff !important;
        }
      }

      &.btn-primary {
        background-color: var(--theme-color);
      }

      &.btn-danger {
        background-color: var(--danger-color);
      }
    }
  }
}